<template>
  <div class='container-tags'>
    <el-card>
      <el-row>
        <!-- 列表搜索 -->
        <el-col :span="18">
          <el-form
            inline
            :model="reqParams"
          >
            <el-form-item label="标签名称">
              <el-input
                v-model="reqParams.tagName"
                placeholder="搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="reqParams.state"
                placeholder="请选择"
              >
                <el-option
                  label="启用"
                  value="1"
                ></el-option>
                <el-option
                  label="禁用"
                  value="0"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear">
                清除
              </el-button>
              <el-button
                type="primary"
                @click="search"
              >搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-button
          size="small"
          style="float:right"
          type="success"
          icon="el-icon-edit"
          @click="showDialog = true"
        >新增标签</el-button>
        <el-col :span="6">
        </el-col>
      </el-row>
      <el-alert
        :title="`数据共 ${ total } 条`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        border
        class="talbe"
      >
        <el-table-column
          type="index"
          label="序号"
        ></el-table-column>
        <el-table-column
          label="所属学科"
          prop="subjectName"
        ></el-table-column>
        <el-table-column
          label="标签名称"
          prop="tagName"
        ></el-table-column>
        <el-table-column
          label="创建者"
          prop="username"
        ></el-table-column>
        <el-table-column label="创建日期">
          <template v-slot=" { row }">
            {{row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template v-slot=" { row }">
            {{ row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="240px"
        >
        <template v-slot="{ row }">
          <el-button
              type="text"
              @click="deitButton(row)"
            >
              <span v-if="row.state === 0">启用</span>
              <span v-else>禁用</span>
            </el-button>
            <el-button type="text" size="small" :disabled="row.state === 0" @click="editRole(row.id)">修改</el-button>
          <el-button type="text" size="small" :disabled="row.state === 0" @click="remove( row.id )">删除</el-button>
        </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pager"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="reqParams.pagesize"
        :current-page="reqParams.page"
        @current-change="changePage"
        @size-change="changSize"
        :page-sizes="[5,10,20,50]"
      />
    </el-card>
    <!-- 组件 -->
    <tags-add :show-dialog.sync="showDialog"
    ref="edit"
    />
  </div>
</template>

<script>
import { list as getToble, remove, changeState } from '@/api/hmmm/tags'
import TagsAdd from '../components/tags-add'
export default {
  name: 'container-tags',
  components: {
    TagsAdd
  },
  data () {
    return {
      // 筛选参数
      reqParams: {
        // 标签列表
        tagName: null,
        // 状态
        state: null,
        // 页码
        page: 1,
        // 尺寸
        pagesize: 10
      },
      // 数据
      tableData: [],
      // 总数
      total: 0,
      showDialog: false // 组件弹层显示
    }
  },
  created () {
    this.getToble()
  },
  methods: {
    // 数据
    async getToble () {
      const { data } = await getToble(this.reqParams)
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    // 分页操作
    changePage (newPage) {
      this.reqParams.page = newPage
      this.getToble()
    },
    // 尺码
    changSize (newSize) {
      this.reqParams.page = 1
      this.reqParams.pagesize = newSize
      this.getToble()
    },
    // 搜索
    search () {
      // 搜索方法中，搜索表单的内的数据双向绑定的
      // this.reqParams.page = 1
      // this.refCatalogue.state =
      // 更新视图调用接口方法
      this.getToble()
    },
    // 清除功能
    clear () {
      this.reqParams = {
        //  标签列表
        tagName: null,
        // 状态
        state: null,
        //  页码
        page: 1,
        // 尺寸
        pagesize: 10
      }
      this.getToble()
    },
    // 删除方法
    async remove (id) {
      // console.log(id)
      // 消息提示 饿了么组件提供
      try {
        await this.$confirm('确定删除吗?')
        await remove({ id })
        // 重新获取
        this.getToble()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 禁用/启用 功能
    async deitButton (val) {
      await changeState({
        id: val.id,
        state: val.state === 1 ? 0 : 1
      },
      this.getToble()
      )
    },
    // 弹出编辑
    async editRole (id) {
      await this.$refs.edit.edit(id)
      this.showDialog = true
    }
  }
}
</script>

<style scoped lang='scss'>
.container-tags {
  padding: 10px 15px;
  .talbe {
    margin-top: 15px;
  }
  .pager {
    margin-top: 15px;
    margin-bottom: 15px;
    float: right;
  }
  .el-link {
    margin-right: 10px;
  }
}
</style>
